<template>
  <div class="tree">
    <tree :folder="list"></tree>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Tree from './components/tree.vue'

const list = ref([
  {
    id: 1,
    name: 'Phone',
    children: [
      {
        id: 11,
        name: 'Apple',
        children: [
          {
            id: 111,
            name: 'Iphone11'
          },
          {
            id: 112,
            name: 'Iphone12'
          },
          {
            id: 113,
            name: 'Iphone13'
          }
        ]
      },
      {
        id: 12,
        name: 'HuaWei'
      },
      {
        id: 13,
        name: 'OPPO'
      }
    ]
  },
  {
    id: 2,
    name: 'Car',
    children: [
      {
        id: 21,
        name: 'BMW',
        children: [
          {
            id: 211,
            name: 'X3'
          },
          {
            id: 212,
            name: 'X5'
          },
          {
            id: 213,
            name: 'X7'
          }
        ]
      },
      {
        id: 22,
        name: 'Audi',
        children: [
          {
            id: 221,
            name: 'A4'
          },
          {
            id: 222,
            name: 'A6'
          },
          {
            id: 223,
            name: 'A8'
          }
        ]
      },
    ]
  }
])

function initData(data, parent) {
  data.forEach(item => {
    if (item.children) {
      initData(item.children, item)
    }
    item.checked = ''
    item.parent = parent
  })
}
initData(list.value, null)
</script>

<style scoped lang="less">
.tree {
  margin-top: 50px;
  margin-left: 100px;
}
</style>
